import { Form, Button, Input } from "antd-mobile";

const ServerIpForm = (props) => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form
      .validateFields()
      .then(() => {
        props.handleSaveServerIp(form.getFieldValue('ipAddr'));
        return;
      })
      .catch((err) => console.log(err));
  };

  return (
    <div style={{ padding: "1rem 2.5rem" }}>
      <Form layout="vertical" form={form}>
        <Form.Header>后端服务配置</Form.Header>
        <Form.Item
          label="IP地址"
          name="ipAddr"
          rules={[
            {
              pattern: new RegExp(
                "^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
              ),
              message: "请输入正确的IP地址!",
            },
            { required: true, message: "请输入正确的IP地址!" }
          ]}
        >
          <Input placeholder="请输入" clearable />
        </Form.Item>
      </Form>
      <Button
        block
        color="primary"
        size="large"
        style={{ marginTop: "3rem" }}
        onClick={handleSubmit}
      >
        保 存
      </Button>
    </div>
  );
};

export default ServerIpForm;
